<template>
  <!-- vin码选择 -->
  <div>
    <TopFilter :list="topFilterList" :cols="2" :collapse="false" @filterChange="hanldeSearch"></TopFilter>
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchapi"
      :params="fetchParams"
      :datakey="'records'"
      selectionType="single"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="handleRowSelectChange"
    ></FilterTable>
    <div class="btnWrap">
      <el-button @click="handleCancle">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </div>
</template>

<script>
import { getCardHandle } from '@/api/part/qualityManagement/decorationDispatchOrder';
import { dictionary } from '@/utils/dictMixin';
export default {
  mixins: [dictionary],
  props: {
    pIndex: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      topFilterList: this.cteateTopFilterList(),
      columns: this.createTableColumns(),
      fetchapi: getCardHandle,
      fetchParams: { xhrAbort: false },
      selectedRowData: [] // 选中的table数据
    };
  },
  methods: {
    cteateTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '会员卡号',
          fieldName: 'vCardNo'
        },

        {
          type: 'INPUT',
          label: '牌照号',
          fieldName: 'vLicenseNo'
        },
        {
          type: 'INPUT',
          label: '车型代码',
          fieldName: 'typeCode'
        },
        {
          type: 'INPUT',
          label: '客户姓名',
          fieldName: 'cusName'
        },
        {
          type: 'INPUT',
          label: '底盘号',
          fieldName: 'vVin'
        },
        {
          type: 'SELECT',
          label: '是否有效',
          fieldName: 'isValid',
          initialValue: '1',
          itemList: [
            { text: '全部', value: '0' },
            { text: '有效', value: '1' },
            { text: '过期', value: '2' }
          ]
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '会员卡号',
          dataIndex: 'vCardNo',
          sorter: true,
          filter: true,
          width: 200,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '底盘号',
          dataIndex: 'vVin',
          sorter: true,
          filter: true,
          width: 200,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '牌照号',
          dataIndex: 'licenseNo',
          sorter: true,
          filter: true,
          width: 200,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '卡类别',
          dataIndex: 'vClassName',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '办理日期',
          dataIndex: 'dUse',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        // {
        //   title: '车型代码',
        //   dataIndex: 'typeCode',
        //   filter: true,
        //   filterType: 'input'
        // },
        {
          title: '办理人',
          dataIndex: 'nUse',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '客户名称',
          dataIndex: 'vCusName',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        }
      ];
    },
    // 点击搜索或者重置
    hanldeSearch(e) {
      this.fetchParams.xhrAbort = true;
      this.fetchParams = Object.assign(this.fetchParams, {
        xhrAbort: false,
        ...e
      });
    },
    // table选择变化
    handleRowSelectChange(e) {
      this.selectedRowData = e;
    },
    // 点击确定
    handleConfirm() {
      this.$emit('onConfirm', {
        carData: this.selectedRowData[0],
        index: this.pIndex
      });
      this.handleCancle();
    },
    // 点击取消
    handleCancle() {
      this.$emit('close2');
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
